<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style-type: none;
            float: left;
        }

        #header {
            width: 1000px;
            height: 62px;
            background-color: #232323;
            margin: 0 auto;
        }

        #header #logo {
            padding: 12px 0 0 12px;
            float: left;
        }

        #header #nav {
            float: right;
            width: 770px;
        }

        #header #nav ul {
            float: right;
        }

        #header #nav ul li {
            background: url(images/line_03.png) no-repeat right center;
        }

        #header #nav ul li a {
            display: block;

            padding: 0 18px 0 18px;
            text-decoration: none;
            color: white;
            font-size: 14px;
            line-height: 62px;
        }

        #header #nav ul li a:hover {
            background-color: #f15a23;
        }

        #banner {
            width: 1000px;
            height: 421px;
            margin: 0 auto;
        }

        #content {
            height: 660px;
        }

        #content #content_top {
            margin: 0 auto;
            width: 1000px;
            height: 314px;
            background-color: #f5f5f5;
            padding-top: 36px;
        }

        #content #content_top li {
            width: 25%;
            height: 330px;
            text-align: center;
            padding-top: 20px;
        }

        #content #content_top li h3 {
            padding-top: 14px;
            padding-bottom: 16px;
            font-size: 22px;
            color: #2a2c41;
        }

        #content #content_top li h4 {
            padding-top: 14px;
            padding-bottom: 16px;
            font-size: 14px;
            color: #556b78;
        }

        #content #content_top li p {
            font-size: 14px;
            color: #a0c9df;
            line-height: 20px;
        }

        #content #content_top .content_top_list {
            background: url(images/long_line_03.png) no-repeat right top;
        }

        #content #content_bottom {
            width: 1000px;
            height: 226px;
            margin: 0 auto;
            padding: 42px 0;
        }

        #content #content_bottom #content_bottom_left {
            width: 656px;
            height: 226px;
            float: left;
        }

        #content #content_bottom #content_bottom_left #content_bottom_left_pic {
            padding: 1px;
            border: #e0dfdd solid 1px;
            float: left;
        }

        #content #content_bottom #content_bottom_left #content_bottom_left_words {
            width: 322px;
            height: 226px;
            float: left;
            padding: 0px 17px 0px 15px;
            background: url(images/long_line_03.png) no-repeat right top;
        }

        #content #content_bottom #content_bottom_left #content_bottom_left_words h3,
        #content #content_bottom #content_bottom_right h3 {
            font-weight: normal;
            font-size: 20px;
            padding: 6px 0;
        }

        #content #content_bottom #content_bottom_left #content_bottom_left_words h4 {
            font-weight: normal;
            font-size: 16px;
            color: #4f4442;
        }

        #content #content_bottom #content_bottom_left #content_bottom_left_words p {
            padding: 12px 0;
            font-size: 12px;
            color: #999;
            text-indent: 32px;
            border-bottom: #cacaca dashed 1px;
        }

        #content #content_bottom #content_bottom_left #content_bottom_left_words ul {
            padding-top: 16px;
        }

        #content #content_bottom #content_bottom_left #content_bottom_left_words ul li {
            color: #454440;
            list-style-image: url(images/timg_03.png);
            list-style-position: inside;
            text-overflow: ellipsis;
            font-size: 14px;
            line-height: 26px;
        }

        #content #content_bottom #content_bottom_right {
            width: 312px;
            height: 226px;
            float: right;
            padding: 0px 17px 0px 15px;
        }

        #content #content_bottom #content_bottom_right h3 {
            padding-bottom: 18px;
        }

        #content #content_bottom #content_bottom_right .content_bottom_right_qq {
            width: 140px;
            height: 24px;
            background: url(images/qq_03.png) no-repeat;
            float: left;
            padding: 0 10px 28px 0;

        }

        #content #content_bottom #content_bottom_right h4 {
            font-size: 18px;
            color: #616566;
            padding-bottom: 20px;
        }

        #content #content_bottom #content_bottom_right p {
            font-size: 14px;
            color: #66665e;
            line-height: 20px;
        }

        #footer {
            width: 1000px;
            height: 260px;
            margin: 0 auto;
            
        }
        #footer #footer_top {
            padding-top:16px;
            height: 198px;
            background: #222;
        }
        #footer #footer_top .footer_unlist{
            width:492px;
            padding-top: 30px;
            background: url(images/long_line_03_03.png) no-repeat right center;
            float: left;
        }
        #footer #footer_top .footer_unlist .footer_top_list{
            float: left;
        }
        #footer #footer_top .footer_unlist .footer_top_list ul{
            padding: 0 28px 0 10px;
            float: left;
        }
        #footer #footer_top .footer_unlist .footer_top_list ul li{
            font-size: 12px;
            color: #9a9a9a;
            float: none;
            text-align: center;
            line-height: 24px;
        }
        #footer #footer_top .footer_unlist .footer_top_list ul .footer_top_list_header{
            color: white;
            padding-bottom: 20px;
        }
        #footer #footer_top #footer_img1{
            width: 314px;
            height: 190px;
            background-color: #fff;
            float: left;
            background: url(images/long_line_03_03.png) no-repeat right center;
        }
        #footer #footer_top #footer_img2{
            width: 194px;
            height: 190px;
            float: left;
            text-align: center;
        }
        #footer #footer_top #footer_img2 p{
            color:#474644;
            font-size: 12px;
            line-height: 18px;
        }
        #footer #footer_bottom{
            height: 46px;
            background-color: #101010;
            line-height: 46px;
            color: #989898;
            font-size: 12px;
            text-align: center;
            clear: both;
        }
        
    </style>
</head>

<body>
    <div id="header">
        <div id="logo">
            <a href="#"><img src="images/logo_03.png" alt=""></a>
        </div>
        <div id="nav">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">走进千锋</a></li>
                <li><a href="">走进千锋</a></li>
                <li><a href="">走进千锋</a></li>
                <li><a href="">走进千锋</a></li>
                <li><a href="">走进千锋</a></li>
                <li><a href="">走进千锋</a></li>
                <li><a href="">走进千锋</a></li>
            </ul>
        </div>
    </div>
    <div id="banner">
        <img src="images/pic_02.png" alt="">
    </div>
    <div id="content">
        <ul id="content_top">
            <li class="content_top_list">
                <img src="images/phone_03.png" alt="">
                <h3>移动产业</h3>
                <h4>国内最大移动互联网开发人才提供平台</h4>
                <p>精准高效的精准高效</p>
                <p>精准高效的精准高效</p>
                <p>精准高效的精准高效</p>
            </li>
            <li class="content_top_list">
                <img src="images/phone_03.png" alt="">
                <h3>移动产业</h3>
                <h4>国内最大移动互联网开发人才提供平台</h4>
                <p>精准高效的精准高效</p>
                <p>精准高效的精准高效</p>
                <p>精准高效的精准高效</p>
            </li>
            <li class="content_top_list">
                <img src="images/phone_03.png" alt="">
                <h3>移动产业</h3>
                <h4>国内最大移动互联网开发人才提供平台</h4>
                <p>精准高效的精准高效</p>
                <p>精准高效的精准高效</p>
                <p>精准高效的精准高效</p>
            </li>
            <li>
                <img src="images/phone_03.png" alt="">
                <h3>移动产业</h3>
                <h4>国内最大移动互联网开发人才提供平台</h4>
                <p>精准高效的精准高效</p>
                <p>精准高效的精准高效</p>
                <p>精准高效的精准高效</p>
            </li>
        </ul>
        <div id="content_bottom">
            <div id="content_bottom_left">
                <img id="content_bottom_left_pic" src="images/ad_03.png" alt="">
                <div id="content_bottom_left_words">
                    <h3>动态新闻</h3>
                    <h4>你在千锋学习 百度有钱出钱</h4>
                    <p>为了能够让国内最大移动互联网开发人才提供平台国内最大移动互联网开发人才提供平台</p>
                    <ul>
                        <li>千锋学员千锋学员千锋学员千锋学员千锋</li>
                        <li>千锋学员千锋学员千锋学员千锋学员千锋学</li>
                        <li>千锋学员千锋学员千锋学员千锋学员千锋学员</li>
                        <li>千锋学员千锋学员千锋学员千锋学员千锋学员</li>
                    </ul>
                </div>
            </div>
            <div id="content_bottom_right">
                <h3>动态新闻</h3>
                <div class="content_bottom_right_qq"></div>
                <div class="content_bottom_right_qq"></div>
                <h4>400-400-44444</h4>
                <p>培训咨询：1111111111</p>
                <p>培训咨询：1111111111</p>
                <p>培训咨询：1111111111</p>
                <p>培训咨询：1111111111</p>
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="footer_top">
            <ul class="footer_unlist">
                <li class="footer_top_list">
                    <ul>
                        <li class="footer_top_list_header">走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                    </ul>
                </li>
                <li class="footer_top_list">
                    <ul>
                        <li class="footer_top_list_header">走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进嘤嘤嘤</li>
                    </ul>
                </li>
                <li class="footer_top_list">
                    <ul>
                        <li class="footer_top_list_header">走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进嘤嘤嘤嘤</li>
                        <li>走进嘤嘤嘤</li>
                    </ul>
                </li>
                <li class="footer_top_list">
                    <ul>
                        <li class="footer_top_list_header">走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                    </ul>
                </li>
                <li class="footer_top_list">
                    <ul>
                        <li class="footer_top_list_header">走进千锋</li>
                        <li>走进千锋</li>
                        <li>走进千锋</li>
                    </ul>
                </li>
            </ul>
            <div id="footer_img1">
                <img src="images/map_03.png" alt="" width="313px">
            </div>
            <div id="footer_img2">
                <img src="images/qrcode_03.png" alt="">
                <p>千锋教育微信号</p>
                <p>扫码加扫码</p>
            </div>
        </div>
        <div id="footer_bottom">
            Copyright 2007-2014 北京千锋互联科技有限公司 京ICP备12003911号-3 京公网安备11010802011455号 站长统计 百度统计
        </div>
    </div>
</body>

</html>